
<template>
  <!-- 循环 -->
  <view class="circulate">
    <!-- 选择题循环 -->
    <view class="questionSelect">
      <!-- 输入一、选择题 -->
      <view class="boxType" >
        {{type[0]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in Data[0].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
          <!-- 如果状态为1，显示红色按钮-->
          <button v-bind:class="[Data[0].status[count-1]===0?'buttonRight':'buttonError']" class="button-span"
                  type="default"
                  @click="check(count-1)">
            {{count}}
          </button>
        </view>
      </view>
    </view>
    <!-- 判断题循环 -->
    <view class="questionFill">
      <!-- 输入二、判断题 -->
      <view class="boxType" >
        {{type[1]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in Data[1].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
          <!-- 如果状态为1，显示红色按钮-->
          <button class="button-span" v-bind:class="[Data[1].status[count-1]===0?'buttonRight':'buttonError']"
                  type="default"
                  @click="check(count+Data[0].count-1)">
            {{count+Data[0].count}}
          </button>
        </view>
      </view>
    </view>
    <!-- 填空题循环 -->
    <view class="questionFill">
      <!-- 输入三、填空题 -->
      <view class="boxType" >
        {{type[2]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in Data[2].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
          <!-- 如果状态为1，显示红色按钮-->
          <button class="button-span" v-bind:class="[Data[2].status[count-1]===0?'buttonRight':'buttonError']"
                  type="default"
                  @click="check(count+Data[0].count+Data[1].count-1)">
            {{count+Data[0].count+Data[1].count}}
          </button>
        </view>
      </view>
    </view>
    <!-- 简答题题循环 -->
    <view class="questionAnswer">
      <!-- 输入四、简答题 -->
      <view class="boxType" >
        {{type[3]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in Data[3].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
          <!-- 如果状态为1，显示红色按钮-->
          <button class="button-span" v-bind:class="[Data[3].status[count-1]===0?'buttonRight':'buttonError']"
                  type="default"
                  @click="check(count+Data[0].count+Data[1].count+Data[2].count-1)">
            {{count+Data[0].count+Data[1].count+Data[2].count}}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {
		getPaperMsg
	} from '../../api/file.js'
	export default{
    //emits:['pageChange'],
		data(){
			return{
				type:
            ["一、选择题","二、判断题","三、填空题","四、简答题"],
				questionPaper:{
						sumScore:0
					},
				Data:[              //status存储问题是否写对的状态
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						}
					],
				questionMsg:[],
			}
		},
		created(){
			this.getPaper();
		},

		methods:{
			getPaper(){
				getPaperMsg({testId:uni.getStorageSync("testCode"),studentNum:uni.getStorageSync("studentNum")}).then(res=>{
					console.log("testDetail:",res);
          this.$store.state.questionMsg = res.data.data.questionMsg;
					this.questionMsg=res.data.data.questionMsg;                    //获取批改完后的试卷信息
					console.log("testDetail的questionMsg:",this.questionMsg);
					this.getMsg();
					console.log("Data:",this.Data);
					this.getScore();
				})
			},
			getScore(){
				for (var i=0;i<this.questionMsg.length;i++){      //算总分
					this.questionPaper.sumScore+=Number(this.questionMsg[i].score);
				}
								// 向父组件传值
				this.$emit('getChild',this.questionPaper.sumScore);
			},
      //初始化Data的信息
			getMsg(){
        for (let i = 0; i<this.questionMsg.length; i++){
          if (this.questionMsg[i].type==="选择题"){
            this.Data[0].count++;
            if (this.questionMsg[i].status=="1")
              this.Data[0].status.push(0);
            else
              this.Data[0].status.push(1);
          }
          else if(this.questionMsg[i].type==="判断题"){
            this.Data[1].count++;
            if (this.questionMsg[i].status=="1")
              this.Data[1].status.push(0);
            else
              this.Data[1].status.push(1);
          }
          else if(this.questionMsg[i].type==="填空题"){
            this.Data[2].count++;
            if (this.questionMsg[i].status=="1")
              this.Data[2].status.push(0);
            else
              this.Data[2].status.push(1);
          }
          else if(this.questionMsg[i].type==="简答题"){
            this.Data[3].count++;
            if (this.questionMsg[i].status=="1")
              this.Data[3].status.push(0);
            else
              this.Data[3].status.push(1);
          }
        }

			},
			check(cnt){
				console.log("cnt:",cnt);
				uni.navigateTo({
					url:"recordDetail?id="+cnt
				})
			}
		}
	}
</script>

<style>
	.boxType{
		font-size: 36rpx;
	}
	.buttonRight{
		border-radius: 30rpx;
		height: 60rpx;
	    width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #2ECC71;
		color: #F8F8F8;
		padding: 0;
	}
	.buttonError{
		border-radius: 30rpx;
		height: 60rpx;
	    width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #F04844;
		color: #F8F8F8;
		padding: 0;
	}
	.buttonFinished{
		border-radius: 30rpx;
		height: 60rpx;
	    width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #3498DB;
		color: #F8F8F8;
		padding: 0;
	}
	/* .questionSelect{
		margin-top: 30rpx;
	} */
	.questionFill{
		margin-top: 30rpx;
	}
	.questionAnswer{
		margin-top: 30rpx;
	}
	.questionComprehensive{
		margin-top: 30rpx;
	}
</style>
